<!-- 合同详情 -->
<template>
  <!-- <p-PageCard v-bind="pageCardConfig" class="contract-details-page-con" :showHelp="true">
    <div slot="header" class="contract-details-page-header">
      {{pageTitle}}  <a-button @click="$router.back();">返回</a-button>
    </div>
    <div class="body">

      <a-tabs v-model="defaultActiveKey"  @change="tabChangeEvent">
        <a-tab-pane :key="pageItem.key" :tab="pageItem.tabName" v-for="(pageItem,index_) in currentPageConfig">
          <div class="preview-con">
            <p-PreviewShow :showHelp="false" :model="pageConfigList.configData[pageItem.configName].PreviewShowConfig.model"  :config="pageConfigList.configData[pageItem.configName].PreviewShowConfig.config" :url="pageConfigList.configData[pageItem.configName].PreviewShowConfig.url" :event="modalEvent" ></p-PreviewShow>
          </div>
          <div class="form-con">
            <a-collapse v-if="groupConfig.show && groupConfig.data.length>=2" v-model="groupConfig.collapseActionKey">
              <a-collapse-panel :key="(index+1)+''" :header="groupItem.groupCode" v-for="(groupItem,index) in pageConfigList.configData[pageItem.configName].formDataList ">
                <div :id="`collapse-panel-${index_}-${index}`"  :key="'collapse-panel-'+index_" v-for="(itemKey,index_) in Object.keys(groupItem.dataList)">
                  <div class="form-title" :id="`PPageForm${index}${index_}`">{{itemKey}}</div>
                  <p-PageForm :showHelp="false" :ref="`PPageForm${index}${index_}`" :formDataList="groupItem.dataList[itemKey]" :layout="pageConfigList.configData[pageItem.configName].formLayout" :formRules="pageConfigList.configData[pageItem.configName].formRules">
                    <template v-slot:[key]="{value, itemData}" v-for="(key) in Object.keys(pageItem.formComponent)">
                      <component :is="pageItem.formComponent[key]" v-model="value" v-bind="itemData.attr || {}" :agreeId="bizId_" :flowCode="flowCode_"></component>
                    </template>
                  </p-PageForm>
                </div>
              </a-collapse-panel>
            </a-collapse>

            <template v-if="groupConfig.show" v-for="(groupItem,index) in pageConfigList.configData[pageItem.configName].formDataList">
              <div v-if="groupConfig.show && groupConfig.data.length==1" :id="`collapse-panel-${index_}-${index}`" :key="'collapse-panel-'+index_" v-for="(itemKey,index_) in Object.keys(groupItem.dataList)">
                <div class="form-title">{{itemKey}}</div>
                <p-PageForm  :ref="'PPageForm'+index_" :formDataList="groupItem.dataList[itemKey]" :layout="pageConfigList.configData[pageItem.configName].formLayout" :formRules="pageConfigList.configData[pageItem.configName].formRules">
                  <template v-slot:[key]="{value, itemData}" v-for="(key) in Object.keys(pageItem.formComponent)">
                    <component :is="pageItem.formComponent[key]" v-model="value" v-bind="itemData.attr || {}" :agreeId="bizId_" :flowCode="flowCode_"></component>
                  </template>
                </p-PageForm>
              </div>
            </template>





            <p-PageForm v-if="!groupConfig.show" :ref="'PPageForm'+index_" :formDataList="pageConfigList.configData[pageItem.configName].formDataList" :layout="pageConfigList.configData[pageItem.configName].formLayout" :formRules="pageConfigList.configData[pageItem.configName].formRules">
              <template v-slot:[key]="{value, itemData}" v-for="(key) in Object.keys(pageItem.formComponent)">
                <component :is="pageItem.formComponent[key]" v-model="value" v-bind="itemData.attr || {}"  :agreeId="bizId_" :flowCode="flowCode_"></component>
              </template>
            </p-PageForm>


            <a-button :key="'action-btn-'+index" :id="item.key" v-for="(item,index) in pageConfigList.configData[pageItem.configName].btnList" :type="item.type" @click.prevent="btnEvent(item)" class="form-btn">
              {{item.label}}
            </a-button>
          </div>
        </a-tab-pane>
        
      </a-tabs>


    </div>
  </p-PageCard> -->
  <ContractDetailsNew :actionCode="actionCode || $route.query.actionCode" :bizId="bizId|| $route.query.bizId" :agreeId="agreeId|| $route.query.agreeId" :flowCode="flowCode|| $route.query.flowCode" :flowNo="flowNo|| $route.query.flowNo" :status="status|| $route.query.status"></ContractDetailsNew>
</template>

<script>
import ContractDetailsNew from './../contractDetailsNew/index.vue'
// import SelectTemplate from './component/SelectTemplate.vue'
// import contractDetailsConfig from './utils/contractDetailsConfig'
// import contractDetailsEvent from './utils/contractDetailsEvent'
// import CreateChannelContracts from './createChannelContracts.vue'
// import BusinessTermination from './component/businessTermination.vue'
// import AgreeContractZj from '@/views/agreeContract/agreeContractZj.vue'

// import BusinessFooter from '@/views/common/businessFooter'
// import BusinessDetails from '@/views/common/businessDetails'
// window['globalData']['agreeDateRange'] = ['2023-11-24','2023-11-30']
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'contractDetails',
  components:{ContractDetailsNew},
  props: {
    // 业务类型
    // 审核类型 1：合同审核；2：续签审核；3：补充协议审核；4：中止审核；5：中止申诉审核；6：解除终止审核；7：终止审核
    actionCode: {
      type: String,
      // required: true
    },
    // 合同id
    bizId: {
      type: String,
      // required: true
    },
    agreeId: {
      type: [String,Number],
      // required: true
    },
    flowCode: {
      type: String,
      // required: true
    },
    flowNo: {
      type: String,
      // required: true
    },
    // 此参数为默认值参数（默认值：'sh'），表示从待审核里过来的
    status: {
      type: String,
      // required: true
    },
  },
  data() {
    // 这里存放数据  bizId=1203&flowGroup=Q1017&detailsType=1&pageType=3
    return {
      // // 重新发起签署 数据配置
      // ReissueSigningConfig:{
      //   visible:false,
      //   actionType:'1',
      //   agreeId:'',
      //   flowCode:''
      // },
      // agreeStatus:'',
      // PageParam:{},
      // pageTitle:'续签合同',
      // showApprove:true,
      // defaultActiveKey:'',
      // flowCode_: '50000004',
      // detailsType: 1,
      // bizId_: '1203',
      // extendObj: { bankName: '' },
      // pageCardConfig:{
      //   isCardBorder:true,
      //   // 此参数可选 头部下的边框
      //   isHeadBottomBorder:true,
      //   // 此参数可选 card-body 的样式 class
      //   bodyClass:'body-con',
      //   // 此参数可选 card-body 的样式 style
      //   bodyStyle: {width:'100%'},
      // },
      // pageConfigList:{},
      // currentPageConfig:[],

      // groupConfig:{
      //   show:true,
      //   collapseActionKey:'2',
      //   data:[]
      // },

    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    // defaultActiveKey: {
    //   handler(val) {
    //     this.pageEvent('tabChangeEvent',val)
    //   },
    //   deep: true,
    //   immediate: true
    // },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log('this.ContractFlowCode====>',this.ContractFlowCode);
    // this.init()
  },
  // 方法集合
  methods: {
    // pageEvent(type, ...args) {
    //   return contractDetailsEvent(type, this, ...args)
    // },
    // init(){
    //   this.pageEvent('pageInit')
    // },
    // tabChangeEvent(activeKey){
    //   this.pageEvent('tabChangeEvent',activeKey)
    // },
    // modalEvent(){},
    // reissueSigningEvent(){
    //   this.ReissueSigningConfig.flowCode = 'CM001'
    //   this.ReissueSigningConfig.visible = true
    // },
    // handleCancel(){
    //   this.ReissueSigningConfig.visible = false
    // },
    // btnEvent(item){
    //   console.log('校验==》',this.$refs,this.currentPageConfig,item);
    //   this.pageEvent('btnEvent',item)
    //   // this.currentPageConfig.forEach((item,index)=>{
    //   //   this.$nextTick(()=>{
    //   //     console.log('校验 1==》','PPageForm'+index);
    //   //     this.$refs['PPageForm'+index] &&this.$refs['PPageForm'+index][0]&& (this.$refs['PPageForm'+index][0].onSubmit((formRes)=>{
    //   //       console.log('校验==》',formRes,item,index);
    //   //     }))
    //   //   })
    //   // })
    // },
  },
  }
</script>
<style lang='less' >
.contract-details-page-con{
  box-sizing: border-box;
  .contract-details-page-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .body-con{
    padding: 20px 30px;
    .body{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      .swiper {
        width: 100%;
        // height: 300px;
      }
      .preview-con{
        width: 100%;
        height: 500px;
        margin-bottom: 5px;
        padding: 5px 40px;
      }
      .form-con{
        width: 100%;
        margin-top: 5px;
        padding: 0 30px;
        .form-title{
          color: #333333;
          font-size: 15px;
          font-weight: bold;
        }
        .p-page-form-con{
          width: 100%;
          border-top: 1px solid #d9d9d9;
          border-left: 1px solid #d9d9d9;
          margin-bottom: 10px;
          display: inline-grid;
          // grid-template-rows: 1fr;
          grid-template-rows: none;
          gap: 0px 0px;
          justify-content: center;
          grid-auto-flow: row;


          .item{
            border-right: 1px solid #d9d9d9;
            border-bottom: 1px solid #d9d9d9;
            padding: 5px 0;
          }
        }
        .form-btn{
          margin: 10px 5px;
        }
      }
      .approve-con{
        width: 100%;
        height: 300px;
        .box{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>

